<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'

const themeVars = reactive<ConfigProviderThemeVars>({
  colorTheme: '#FF5454',
  tabsNavLineBgColor: 'red',
  navbarColor: '#ffffff',
})
</script>

<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <wd-config-provider :theme-vars="themeVars" custom-style="background-color: #f5f5f5;height: 100%">
    <div class="content-page">
      <slot />
    </div>
    <wd-notify />
    <wd-toast />
    <wd-message-box />
    <privacy-popup />
  </wd-config-provider>
</template>

<style scoped>
.content-page {
  background-color: #fafafa;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  height: 100%;
}

.content-page::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
</style>
